import { Form} from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Modal,message,Button,Upload} from 'antd';
import React from 'react';
import { useState, useCallback, useRef, useEffect } from 'react';
import { useRequest } from '@umijs/hooks';
import { downLoadExcel , importChart} from '../service';
import { UploadOutlined } from '@ant-design/icons';
import styles from './Add.less'
const Addexcel = props => {
  const { addExcel, onCancel} = props;
  const  [text,handleText]=useState(null)
 // 下载模板
 const exportCharts = () => {
      const hide = message.loading('正在导出');
      let res =downLoadExcel().then(res=>{
        let blob = new Blob([res], {
          type: 'application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
        })
        let elink = document.createElement('a')
        elink.download = "pkginfoTeplate.xls"
        elink.style.display = 'none'
        elink.href = URL.createObjectURL(blob)
        document.body.appendChild(elink)
        elink.click()
        document.body.removeChild(elink)
        hide();
        message.success('下载成功');
      }).catch(err => {
        console.log(err)
      });
    }
  const [uploading, setUploading]=useState(false)
  const [fileList,setFileList]=useState([])
  const prop = {
    onRemove: file => {
      const index = fileList.indexOf(file);
      const newFileList = fileList.slice();
      newFileList.splice(index, 1);
      setFileList(newFileList)
    },
    beforeUpload: file => {
      setFileList([...fileList, file])
      return false;
    },
    fileList,
    accept:"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
  };
 const  handleUpload = () => {
    const formData = new FormData();
    console.log(fileList)
    fileList.forEach(file => {
      formData.append('file', file);
    });
    setUploading(true)
    importChart(formData).then((res) => {
      setFileList([])
      setUploading(false)
      console.log(res)
      if ((res.totalFailureCount===0)||(res.totalExitCount===0)||(res.totalFailParamCount===0)) {
         handleText(res)
      } else {
        message.success('上传成功');
        onCancels()

      }
      // totalFailureCount//旅客信息未找到
      // totalFailureContent//未找到的旅客内容
      // totalExitCount>0//是否重复
      // totalExitContent//填错内容失败，重复提交
      // totalFailParamCount
      // totalFailParamContent//填错内容，参数错误为
    }).catch(() => {
      setUploading(false)
      message.error('上传失败.');
    });
  };
  const onCancels = () => {
        handleText(null)
        onCancel()
  };
    return(<Modal
      destroyOnClose
      title="上传异常行李表/下载模板"
      visible={addExcel}
      footer={null}
      style={{ width: '100%', buttom: 0, paddingBottom: 0 }}
      onCancel={onCancels}
    >
      <div  style={{display: 'flex',justifyContent:'center',alignItems:'center',flexDirection:'column'}}>
        <p>上传前请下载事故详情表参考模板填写再上传！！！</p>
        <Button onClick={() => exportCharts()} icon="download" type="primary">
        下载模板
        </Button>
       <div style={{display: 'flex',justifyContent:'center',alignItems:'center',flexDirection:'column',marginTop:'7px'}} className={styles.add}>
        <Upload {...prop}>
          <Button type="primary" >
            <UploadOutlined />上传异常行李详情表
          </Button>
        </Upload>
        <Button
          type="primary"
          onClick={handleUpload}
          disabled={fileList.length === 0}
          loading={uploading}
          style={{ marginTop: 16}}
        >
          {uploading ? '上传中' : '上传'}
        </Button>
      </div>
      {
      // totalFailureCount//旅客信息未找到
      // totalFailureContent//未找到的旅客内容
      // totalExitCount>0//是否重复
      // totalExitContent//填错内容失败，重复提交
      // totalFailParamCount
      // totalFailParamContent//填错内容，参数错误为
        text?
        <div style={{marginLeft:'10%'}}>
          <br/>
          上传已成功，以下为未成功的数据，请修改,如不修改，请关闭弹框。
         {
           text.totalFailureCount>0?
           <div>旅客信息未找到,未找到的旅客是{text.totalFailureCount}个，信息如下：
             <br/>
             <p  style={{color:'red'}}>{text.totalFailureContent}</p>
            </div>:null
         }
          {
           text.totalExitCount>0?
           <div>旅客信息重复,重复的旅客是{text.totalExitCount}个，信息如下：
             <br/>
             <p  style={{color:'red'}}>{text.totalExitContent}</p>
            </div>:null
         }
          {
           text.totalFailParamCount>0?
           <div>旅客信息参数填错,填错的参数是{text.totalFailParamCount}个，信息如下：
            <br/>
           <p  style={{color:'red'}}>{text.totalFailParamContent}</p>
           </div>:null
         }
        </div>

        :null
      }
      </div>
    </Modal>
  );
};

export default Form.create()(Addexcel);
